
<template>
  <view class="container">
    <!-- 时间线模块 -->
    <view class="timeline-section">
      <view class="section-title">高考报考时间线</view>
      <view class="timeline">
        <view class="timeline-item" v-for="(item, index) in timelineData" :key="index">
          <view class="time-point" :class="{ active: item.isActive }"></view>
          <view class="time-content">
            <view class="time-date">{{ item.date }}</view>
            <view class="time-desc">{{ item.description }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 志愿填报指南 -->
    <view class="guide-section">
      <view class="section-title">志愿填报指南</view>
      <view class="guide-cards">
        <view class="guide-card" v-for="(guide, index) in guideData" :key="index">
          <image class="guide-image" :src="guide.image" mode="aspectFill"></image>
          <view class="guide-content">
            <view class="guide-title">{{ guide.title }}</view>
            <view class="guide-desc">{{ guide.description }}</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 院校专业信息 -->
    <view class="college-section">
      <view class="section-title">院校专业信息</view>
      <view class="college-cards">
        <view class="college-card" v-for="(college, index) in collegeData" :key="index">
          <view class="college-header">
            <view class="college-name">{{ college.name }}</view>
            <view class="college-tag">{{ college.tag }}</view>
          </view>
          <view class="college-info">
            <view class="info-item">
              <uni-icons type="info" size="16" color="#3498db"></uni-icons>
              <text>{{ college.score }}</text>
            </view>
            <view class="info-item">
              <uni-icons type="location" size="16" color="#3498db"></uni-icons>
              <text>{{ college.location }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 资讯内容区 -->
    <view class="news-section">
      <view class="section-title">最新资讯</view>
      <view class="news-list">
        <view class="news-item" v-for="(news, index) in newsData" :key="index">
          <image class="news-image" :src="news.image" mode="aspectFill"></image>
          <view class="news-content">
            <view class="news-title">{{ news.title }}</view>
            <view class="news-desc">{{ news.description }}</view>
            <view class="news-meta">
              <text class="news-time">{{ news.time }}</text>
              <text class="news-views">{{ news.views }}阅读</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const timelineData = ref([
  {
    date: '2024年6月7日-9日',
    description: '高考时间',
    isActive: true
  },
  {
    date: '2024年6月23日-25日',
    description: '高考成绩公布',
    isActive: false
  },
  {
    date: '2024年6月28日-7月2日',
    description: '第一批本科志愿填报',
    isActive: false
  },
  {
    date: '2024年7月3日-7月6日',
    description: '第二批本科志愿填报',
    isActive: false
  }
]);

const guideData = ref([
  {
    title: '志愿填报基础知识',
    description: '了解平行志愿、专业志愿等基本概念',
    image: 'https://ai-public.mastergo.com/ai/img_res/3c56b2df9ecf8fab18ef057dccbf2b6d.jpg'
  },
  {
    title: '志愿填报技巧',
    description: '掌握填报策略，提高录取几率',
    image: 'https://ai-public.mastergo.com/ai/img_res/a025a277c50a0804862657725c8ae3c7.jpg'
  }
]);

const collegeData = ref([
  {
    name: '清华大学',
    tag: '985/211',
    score: '分数线：680',
    location: '北京市'
  },
  {
    name: '北京大学',
    tag: '985/211',
    score: '分数线：675',
    location: '北京市'
  },
  {
    name: '浙江大学',
    tag: '985/211',
    score: '分数线：660',
    location: '浙江省'
  }
]);

const newsData = ref([
  {
    title: '2024年高考改革最新政策解读',
    description: '教育部发布最新高考改革方案，包含多项重要变化...',
    image: 'https://ai-public.mastergo.com/ai/img_res/6e2a008d8aaf6535ce9cd854f7359b68.jpg',
    time: '2024-03-15',
    views: '2.3万'
  },
  {
    title: '高考志愿填报避坑指南',
    description: '专家详解志愿填报中常见误区及解决方案...',
    image: 'https://ai-public.mastergo.com/ai/img_res/8fb993b609936d842e671149a6461d58.jpg',
    time: '2024-03-14',
    views: '1.8万'
  }
]);
</script>

<style scoped>
page {
  height: 100%;
  background-color: #f5f7fa;
}

.container {
  padding: 30rpx;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 30rpx;
}

/* 时间线样式 */
.timeline-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.timeline {
  position: relative;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  padding: 20rpx 0;
  position: relative;
}

.time-point {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #bdc3c7;
  margin-right: 20rpx;
  margin-top: 10rpx;
  flex-shrink: 0;
}

.time-point.active {
  background-color: #3498db;
}

.time-content {
  flex: 1;
}

.time-date {
  font-size: 14px;
  color: #3498db;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.time-desc {
  font-size: 14px;
  color: #7f8c8d;
}

/* 志愿填报指南样式 */
.guide-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.guide-cards {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.guide-card {
  display: flex;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  overflow: hidden;
}

.guide-image {
  width: 200rpx;
  height: 150rpx;
  flex-shrink: 0;
}

.guide-content {
  padding: 20rpx;
  flex: 1;
}

.guide-title {
  font-size: 16px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 10rpx;
}

.guide-desc {
  font-size: 14px;
  color: #7f8c8d;
}

/* 院校专业信息样式 */
.college-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
}

.college-cards {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.college-card {
  background-color: #f8f9fa;
  border-radius: 12rpx;
  padding: 20rpx;
}

.college-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.college-name {
  font-size: 16px;
  font-weight: bold;
  color: #2c3e50;
}

.college-tag {
  font-size: 12px;
  color: #3498db;
  background-color: rgba(52, 152, 219, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
}

.college-info {
  display: flex;
  gap: 30rpx;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.info-item text {
  font-size: 14px;
  color: #7f8c8d;
}

/* 资讯内容区样式 */
.news-section {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 30rpx;
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.news-item {
  display: flex;
  gap: 20rpx;
}

.news-image {
  width: 200rpx;
  height: 150rpx;
  border-radius: 8rpx;
  flex-shrink: 0;
}

.news-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.news-title {
  font-size: 16px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 10rpx;
}

.news-desc {
  font-size: 14px;
  color: #7f8c8d;
  margin-bottom: 20rpx;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-meta {
  display: flex;
  gap: 20rpx;
}

.news-time,
.news-views {
  font-size: 12px;
  color: #95a5a6;
}
</style>

